<template>
  <div class="tabBar" style="z-index: 999">
    <ul>
      <li @click="go('homepage')">
        <div>
          <div class="icon">
            <img v-if="isClick!=='homepage'" class="es" src="../../assets/img/home/tab-icon1.png" alt="">
            <img v-else class="es" src="../../assets/img/home/tab-icon1-2.png" alt="">
          </div>
          <p :class="{'es':isClick==='homepage'}">首页</p>
        </div>
      </li>
      <li @click="go('personal')">
       <div>
         <div class="icon">
           <img v-if="isClick!=='personal'" src="../../assets/img/home/tab-icon2.png" alt="">
           <img v-else src="../../assets/img/home/tab-icon2-2.png" alt="">
         </div>
         <p :class="{'es':isClick==='personal'}">我的</p>
       </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  data(){
    return{
      isClick:''
    }
  },
  mounted(){
    this.isClick = this.$route.path.slice(1);
    window.addEventListener('popstate', this.goBack, false);
  },
  methods:{
    goBack () {
      console.log(this.$route.path);
      this.isClick=this.$route.path.slice(1);
    },
    go(path){
      if(this.isClick !== path){
        this.isClick = path;
        this.$router.push('/'+path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tabBar{
    width: 100%;
    height: 98px;
    background: #fff;
    position:fixed;
    left: 0;
    bottom: 0;
    ul{
      width: 100%;
      height: 100%;
      li{
        width: 50%;
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
        padding: 3px 0 0 0;
        .icon{
          width: 48px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 48px;
            &.es{
              width: 44px;
            }
          }
        }
        p{
          font-size:24px;
          font-weight:400;
          line-height:24px;
          margin:4px 0 0 0;
          color:rgba(142,142,147,1);
          &.es{
            color:rgba(231,31,24,1);
          }
        }
      }
    }
  }
</style>
